<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">

		<button-search class="pt-3"
		placeholder="搜索的商品名称"
		@search="searchEvent"
		:showSuperSearch="false"
		ref="buttonSearch">
			
			<!-- <template #form>
				<el-form inline ref="form" :model="form" label-width="80px">
					<el-form-item label="评价用户" class="mb-0">
						<el-input v-model="form.username" placeholder="评价用户" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="评价类型" class="mb-0">
						<el-select v-model="form.type" placeholder="评价类型" size="mini">
							<el-option key="1" label="选项1" value="1">
								
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="发布时间" class="mb-0">
						<el-date-picker
						size="small"
						v-model="form.time"
						type="daterange"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item class="mb-0">
						<el-button class="ml-2" type="info" size="mini" @click="searchEvent">搜索</el-button>
						<el-button type="info" size="mini" @click="clearSearch">清空筛选条件</el-button>
					</el-form-item>
				</el-form>
			</template> -->
		</button-search>
		<!-- 商品列表 -->
		<el-table border class="mt-3" :data="tableData" style="width: 100%"
		>
		
			<el-table-column type="expand">
			  <template slot-scope="scope">
				<div class="media">
					<img class="mr-2" :src="scope.row.user.avatar" 
					style="width: 50px;height: 50px;border-radius: 100%;"/>
					<div class="media-body">
						<h6 class="mt-0 d-flex">
							{{scope.row.user.username}}
							<small class="ml-2">{{scope.row.review_time}}</small>
							<el-button class="ml-auto" type="info" size="mini"
							@click="textareaEdit = true"
							v-if="!scope.row.extra && !textareaEdit">客服回复</el-button>
						</h6>
						{{scope.row.review.data}}
						<div class="py-2">
							<img 
							style="width: 100px;height: 100px;"
							v-for="(item, index) in scope.row.review.image" :key="index"
							:src="item" />
						</div>
						
						<div v-if="textareaEdit">
							<el-input type="textarea"
							v-model="textarea" 
							:row="2"
							placeholder="请输入回复内容"></el-input>
							<div class="py-2">
								<el-button type="success"
								@click="review(scope.row.id)">回复</el-button>
								<el-button class="mx-2" type="error"
								@click="closeTextarea">取消</el-button>
							</div>
						</div>
						
						<div v-if="scope.row.extra && !textareaEdit">
							<div class="media mt-2 bg-light p-2 rounded"
							v-for="(item,index) in scope.row.extra" :key="index">
								<div class="media-body">
									<h6 class="d-flex">
										客服
										<el-button class="ml-auto" type="info" size="mini"
										@click="openTextarea(item, index)"
										v-if="!textareaEdit">修改</el-button>
									</h6>
									{{item.data}}
								</div>
							</div>
						</div>
						
					</div>
				</div>
			  </template>
			</el-table-column>
			
			<el-table-column label="ID" width="80" prop="id" align="center">
			</el-table-column>
			<el-table-column label="商品" align="center" width="300">
				<template slot-scope="scope">
					<div class="media">
						<img class="mr-2" 
						:src="scope.row.goods_item.cover" 
						style="width: 60px;" scope="widthFix"/>
						<div class="media-body">
							<p class="mt-0">{{scope.row.goods_item.title}}</p>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="评价信息" width="200">
				<template slot-scope="scope">
					<div class="d-flex flex-column">
						<p>用户名: {{scope.row.user.username}}</p>
						<p>评分: 
							<el-rate
							v-model="scope.row.rating"
							disabled
							show-score
							text-color="#ff9900"
							score-template="{value}"></el-rate>
						</p>
					</div>
				</template>
			</el-table-column>
		
			<el-table-column width="200" prop="review_time" label="评价时间" align="center">
				
			</el-table-column>
			
			<el-table-column label="是否显示" width="150">
				<template slot-scope="scope">
					<el-button :type="scope.row.status ? 'success' : 'danger'" size="mini" plain
					@click="changeStatus(scope.row)">
						{{scope.row.status ? '显示' : '隐藏'}}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="height: 60px;"></div>
		<el-footer class="d-flex border-top align-items-center px-0 position-fixed bg-white" style="bottom: 0;left: 200px;right: 0;z-index: 10;">
			<div class="px-2" style="flex: 1;">
				<el-pagination
				 @size-change="handleSizeChange" 
				 @current-change="handleCurrentChange" 
				 :current-page="page.current"
				 :page-sizes="page.sizes" 
				 :page-size="page.size" 
				 layout="total, sizes, prev, pager, next, jumper" 
				 :total="page.total">
				</el-pagination>
			</div>
		</el-footer>

	</div>
</template>

<script>
	import buttonSearch from "@/components/common/button-search.vue"
	import common from "@/common/mixins/common.js";

	export default {
		inject:['layout'],
		
		mixins:[common],
		
		components: {
			buttonSearch,
		},

		data() {
			return {
				preUrl: 'goods_comment',
				
				title: '',
				
				textarea: '',
				textareaEdit: false,
				replyIndex: -1,
				
				
				tableData: [],
				
				// tableData: [
				// 	{
				// 		id: 1,
				// 		goods: {
				// 			title: '商品标题',
				// 			cover: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1581494068.13077664.jpg'
				// 		},
				// 		username: '用户名',
				// 		star: 5,
				// 		create_time: '2020-10-01 14:22:00',
				// 		status: 1,
				// 	}
				// ],
			}
		},
		

		methods: {
			
			openTextarea(item, index) {
				this.textarea = item.data
				this.textareaEdit = true
				this.replyIndex = index
			},
			
			review(id) {
				if(this.textarea == '') {
					return this.$message({
						message: '回复内容不能为空',
						type: 'error'
					});
				}
				this.layout.showLoading()
				this.axios.post('/admin/goods_comment/review/' + id, {
					data: this.textarea
				}, {token: true}).then(res => {
					let index = this.tableData.findIndex(v => v.id === id)
					this.tableData[index].extra[this.replyIndex].data = this.textarea
					this.closeTextarea()
					this.layout.hideLoading()
					this.$message({
						message: '恭喜你，回复成功',
						type: 'success'
					});
				}).catch(err => {
					this.layout.hideLoading()
					this.$message({
						message: '回复失败',
						type: 'error'
					});
				})
			},
			
			closeTextarea() {
				this.textarea = ''
				this.textareaEdit = false
			},
			
			//
			getListResult(e) {
				this.tableData = e.list
			},
			
			//searchEvent
			searchEvent(e) {
				this.title  = e
				this.getList()
			},
			
			//重写搜索URL
			getListUrl() {
				return `/admin/${this.preUrl}/${this.page.current}?limit=${this.page.size}&title=${this.title}`
			},
			
			//submit
			submit() {
				this.$refs.form.validate(res => {
					if (res) {
						var msg = '添加成功'
						if (this.editIndex === -1) {
							let arr = this.form.value.split(/[(\r\n)\r\n]+/)
							arr = arr.filter(v => v && v.trim() !== '')
							this.form.value = arr.join(',')
							this.tableData.unshift(this.form)
							
						} else {
							msg = '修改成功'
							let item = this.tableData[this.editIndex]
							let arr = this.form.value.split(/[(\r\n)\r\n]+/)
							arr = arr.filter(v => v && v.trim() !== '')
							this.form.value = arr.join(',')
							for (let key in this.form) {
								item[key] = this.form[key]
							}
						}
						this.showCreateModel = false
						this.$message({
							type: 'success',
							message: msg
						})
					}
				})
				
			},

		}
	}
</script>

<style>
</style>
